<template>
    <div>
        <h1>v-for的使用</h1>
        <button @click="handleClick1">点击1</button>
        <!-- $event就是事件委托，传进去 -->
        <button @click="handleClick2(1,$event)">点击2</button>
        <ul>
            <!-- 你想生成谁，你就给谁加v-for
                语法1 v-for="数组的每一项的内容随便起的 in data中的变量"
                语法2 v-for="(数组的每一项的内容随便起的,下标) in data中的变量"
                v-for必须加上key，为了放置渲染错位
            -->
            <li v-for="(item,index) in stu" :key="index">
                {{ item.name }}  --- {{ index }}
            </li>
        </ul>
    </div>
</template>
<script>
export default{
    // 存储变量的地方
    data(){
        return{
            stu:[
                {name:"张三",age:18},
                {name:"李四",age:20},
                {name:"王五",age:19},
            ]
        }
    },
    // 存放函数的地方
    methods:{
        handleClick1(e){
            // this指向的是这个vue的实例，里面存储了当前组件中定义的变量和函数
            console.log(this.stu)
            console.log(e,"函数不加()正常访问事件委托")
        },
        handleClick2(e,s){
            console.log(s,"$event事件委托")
        }
    }
}
</script>
